<template>
	<view class="w-100">
		<view v-if="productIds.length >= 1" class="pk_box flex justify-around align-center px-1" @click="pkChange">
			<text>{{ productIds.length }}</text>
			<image src="/static/img2/home/pk.png" mode="aspectFit"></image>
		</view>
		<view class="product_item flex mb-4 shadow " :class="{ product_item2: btnShow || !editBtn }" v-for="(item, index) of dataList" :key="index" @click="toDetail(item)">
			<!-- 遮罩层 -->
			<view class="overlay" v-if="(item.check && checkShow) || (item.check && editBtn)"></view>
			<view class="top_cont" @tap.stop v-if="editBtn || checkShow">
				<checkbox-group @change="checkChange(item, index)" class="check">
					<view class="check_box"><checkbox class="check p-1" value="item.id" :checked="item.check" :disabled="item.disabled" color="#CF1526" /></view>
				</checkbox-group>
			</view>
			<view class="flex w-100" :class="{ rcont: editBtn || checkShow }">
				<view class="top_img">
					<view class="brand_box" :class="{ brand_box2: editBtn || checkShow }" v-if="item.product_brand">
						<view class="brand">{{ item.product_brand }}</view>
					</view>
					<view class="p-2"><image :src="item.product_img" mode="aspectFill"></image></view>
				</view>
				<view class="product_text py-3 px-2 " :style="editBtn ? 'margin-left:10rpx' : ''">
					<view class="product_t text_hidden1 mb-1">{{ item.product_name }}</view>
					<view v-if="item.c_status == 1" class="font_24_2 c_9 text_hidden2">{{ item.profile || '' }}</view>
					<view v-else class="product_else">
						<text class="mr-3">品牌：{{ item.product_brand || '暂无' }}</text>
						<text class="mr-3">功率：{{ item.A14 || '暂无' }}</text>
						<text class="mr-3">效率：{{ item.A6 || '暂无' }}</text>
						<text class="">范围：{{ item.product_type || '暂无' }}</text>
					</view>
					<view class="product_else mt-1">
						<!-- <text>标签：</text> -->
						<text class="label c_9 mr-2 px-1 rounded" v-for="(label_item, l_idx) of item.label_name" :key="l_idx">{{ label_item }}</text>
					</view>
				</view>
				<view v-if="!editBtn">
					<!-- <view v-if="btnShow" class="product_btn flex align-center">
					<text class="text_btn" @click="collectionChange(item, index)">{{ item.is_collection == 0 ? '收藏' : '已收藏' }}</text>
					<text class="text-white line">|</text>
					<text v-if="item.c_status == 1" class="pk_active" @click="imgTextChange">对比</text>
					<text v-else @click="contrastBtn(item, index)" class="text_btn" :class="item.isCheck ? 'pk_active' : 'text_btn'">对比</text>
				</view> -->
					<view v-if="btnShow" class="bottom_btn text-white">
						<!-- <text v-if="item.c_status == 1" class="btn px-2 py-1 font-sm" @click="imgTextChange">+ 对比</text> -->
						<text
							v-if="item.c_status == 0"
							@click.stop="contrastBtn(item, index)"
							class="btn text_btn px-2 py-1 font-sm"
							:class="item.isCheck ? 'pk_active' : 'text_btn'"
						>
							+ 对比
						</text>
					</view>
				</view>
				<view class="product_btn flex align-center" v-else>
					<text class="text_btn" @click.stop="toHome(item)">{{ item.recommend == 3 ? '下主页' : '上主页' }}</text>
					<text class="text-white line">|</text>
					<text v-if="item.c_status == 0" class="text_btn" @click.stop="toDetail(item)">详情</text>
					<text v-else @click.stop="goPages('./publish/product_img_put?mid=' + item.mid + '&id=' + item.id)">编辑</text>
				</view>
			</view>
			<text class="bot_tag bg_main font-small text-white px-1" v-if="item.prize_name" @click.stop="goPages('/subPages/web_view_h5/index?url=' + item.prize_url)">
				{{ item.prize_name }}>
			</text>
		</view>
	</view>
</template>

<script>
import { likecollectionDzsc } from '@/api/home/company.js';
import { getProductCompared } from '@/api/home/nav/product_data.js';
import { userHomepage } from '@/api/my/publish.js';

export default {
	props: {
		list: {
			type: Array,
			default: function() {
				return [];
			}
		},
		btnShow: {
			type: Boolean,
			default: false
		},
		editBtn: {
			type: Boolean,
			default: false
		},
		checkShow: {
			type: Boolean,
			default: false
		},
		select: {
			type: Boolean,
			default: false
		},
		exhibitionId: {
			type: String,
			default: ''
		}
	},
	// props: ['list', 'marginRight', 'btnShow','editBtn'],
	data() {
		return {
			dataList: [],
			productIds: [], //存储对比id
			midType: [],
			checkIds: [] //选择参展产品
		};
	},
	watch: {
		list: {
			handler(newV, oldV) {
				this.dataList = newV;
				console.log("==",this.dataList);
			},
			deep: true
		},
		dataList: {
			handler(newV, oldV) {
				this.dataList = newV;
				// 选择参展产品回显
				let checkList = [...getApp().globalData.pro1, ...getApp().globalData.pro2];
				for (var k = 0; k < checkList.length; k++) {
					for (var i = 0; i < this.dataList.length; i++) {
						if (this.dataList[i].id == checkList[k]) {
							this.dataList[i].check = true;
							continue;
						}
					}
				}
			},
			deep: true
		}
	},
	created() {
		// 产品对比完成返回首页或企业主页，重置productIds数组
		uni.$on('productPk', data => {
			this.productIds = [];
			this.dataList.forEach(child => {
				child.isCheck = false;
			});
		});
	},
	mounted() {
		this.dataList = this.list;
		this.productIds = [];

		// 参展产品
		const checks = [...getApp().globalData.pro1, ...getApp().globalData.pro2];
		if (checks.length >= 1) {
			this.dataList.forEach((child, idx) => {
				checks.forEach(item => {
					if (child.id == item) {
						this.$set(this.dataList[idx], 'check', !child.check);
					}
				});
			});
		}
	},
	methods: {
		toDetail(val) {
			uni.navigateTo({
				// val.id   17279
				url: '/subPages/home/product_data/detail?id=' + val.id + '&status=' + val.c_status + '&exhibitionId=' + this.exhibitionId
			});
		},
		// 收藏
		collectionChange(val, idx) {
			let state = val.is_collection == 0 ? 1 : 2; //  0 未点赞 1 已点赞
			this.dzscChange(3, state, val, idx);
		},
		dzscChange(type, status, val, idx) {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin(); // 未登录
			} else {
				let msg = {
					checktype: 2, //执行收藏点赞企业操作
					type: type, //1 收藏企业  2  点赞企业  3 收藏产品  4 点赞产品
					status: status, // 1 收藏以及点赞企业、产品  2 取消收藏以及点赞 企业、产品
					company_product_id: val.id, // 传递对应企业以及产品id
					uid: uni.getStorageSync('userInfo').userId, //用户id
					c_status: val.c_status // 0参数型，1图文型  (只有产品传)
				};
				likecollectionDzsc(msg)
					.then(res => {
						if (res.code == 0) {
							uni.$u.toast(res.msg);
							// 处理收藏产品后的操作
							let state = this.dataList[idx].is_collection == 0 ? 1 : 0;
							this.$set(this.dataList[idx], 'is_collection', state);
						} else {
							uni.$u.toast(res.msg);
						}
					})
					.catch(err => {
						console.log('点赞或收藏失败', err);
						uni.$u.toast('点赞或收藏失败');
					});
			}
		},
		imgTextChange() {
			uni.$u.toast('图文型产品无法进行对比');
		},
		// 对比--选择产品
		contrastBtn(val, index) {
			if (this.productIds.length >= 10) {
				uni.$u.toast('参加对比的产品不能大于10个');
				return;
			} else {
				val.isCheck = this.productIds.every(item => item !== val.id);
				if (val.isCheck) {
					if (this.productIds.length >= 1 && this.midType[0] != val.mid) {
						uni.$u.toast('不同分类的产品无法对比哦！');
						val.isCheck = false;
						return;
					} else {
						this.productIds.push(val.id);
						this.midType.push(val.mid);
					}
				} else {
					var idx = this.productIds.map(item => item).indexOf(val.id);
					this.productIds.splice(idx, 1);
					this.midType.splice(idx, 1);
				}
			}
		},
		// 去PK
		pkChange() {
			if (this.productIds.length <= 1) {
				uni.$u.toast('请至少选择两个及以上的产品');
			} else if (this.productIds.length > 10) {
				uni.$u.toast('参加对比的产品不能大于10个');
			} else {
				let ids = this.productIds.map(item => item).join(',');
				this.goPages('/subPages/home/product_data/contrast?ids=' + ids + '&mid=' + this.midType[0]);
			}
		},

		// 选择产品
		checkChange(val, idx) {
			let checks = getApp().globalData.pro1.length + getApp().globalData.pro2.length;
			// 选择参展产品
			if (this.checkShow && checks >= 5) {
				uni.$u.toast('选择产品数量不能大于5个');
				this.$set(this.dataList[idx], 'check', false);
				let index1 = getApp()
					.globalData.pro1.map(item => item)
					.indexOf(val.id);
				index1 !== -1 && getApp().globalData.pro1.splice(index1, 1);
				let index2 = getApp()
					.globalData.pro2.map(item => item)
					.indexOf(val.id);
				index2 !== -1 && getApp().globalData.pro2.splice(index2, 1);
				this.$emit('proDel');
				return;
			}

			this.$set(this.dataList[idx], 'check', !val.check);
			if (val.check) {
				// c_status 0参数型，1图文型
				if (val.c_status == 0) {
					// 选择的参数型产品
					getApp().globalData.pro1.push(val.id);
				} else {
					// 选择的图文型产品
					getApp().globalData.pro2.push(val.id);
				}
			} else {
				if (val.c_status == 0) {
					let index2 = getApp()
						.globalData.pro1.map(item => item)
						.indexOf(val.id);
					index2 !== -1 && getApp().globalData.pro1.splice(index2, 1);
				} else {
					let index2 = getApp()
						.globalData.pro2.map(item => item)
						.indexOf(val.id);
					index2 !== -1 && getApp().globalData.pro2.splice(index2, 1);
				}
			}
			let test = {
				product_ids: [...new Set(getApp().globalData.pro1)],
				textProductIds: [...new Set(getApp().globalData.pro2)]
			};
			this.$emit('proDel', test);
		},
		// 上主页
		toHome(val) {
			let msg = {
				id: val.id,
				token: uni.getStorageSync('userInfo').token || '',
				recommend: val.recommend,
				c_status: val.c_status
			};
			userHomepage(msg)
				.then(res => {
					uni.$u.toast(res.msg);
					if (res.code == 0) {
						val.recommend = val.recommend == 3 ? null : 3;
					}
				})
				.catch(err => {
					console.log('上主页操作失败', err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.box_height {
	min-height: 563rpx;
}

.shadow_show {
	// box-shadow: 0px 0px 20rpx 0px rgba(210, 210, 210, 0.53);
	// box-shadow: 0px 0px 15rpx rgba(170, 170, 170, 0.5) inset !important;
	box-shadow: 0px 0px 15rpx rgba(216, 216, 216, 0.5) inset !important;
}

.product_item2 {
	height: auto !important;
	padding-bottom: 0 !important;
	// box-shadow: 1px 1px 20rpx 0px rgba(210, 210, 210, 0.53) !important;
}

.product_item {
	width: 100%;
	// height: 597rpx;
	background-color: #fff;
	position: relative;
	border-radius: 14rpx;
	border-top-left-radius: 0;
	padding-bottom: 25rpx;
	// box-shadow: 0px 0px 15rpx rgba(170, 170, 170, 0.5) inset !important;
	// box-shadow: 1px 1px 20rpx 0px rgba(210, 210, 210, 0.53);

	.top_img {
		width: 20%;
		position: relative;

		.brand_box {
			background-color: #fff;
			padding: 5rpx 30rpx 10rpx 20rpx;
			position: absolute;
			top: -25rpx;
			left: 0rpx;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 10rpx;
			box-shadow: -5rpx -6rpx 12rpx -5rpx rgba(0, 0, 0, 0.15);

			.brand {
				background: linear-gradient(-39deg, #fad3a1, #fff1cc, #f4dba6);
				border-radius: 10rpx;
				font-size: 16rpx;
				color: #8e6731;
				padding: 3rpx 12rpx;
				white-space: nowrap;
			}
		}

		.brand_box2 {
			left: -50rpx;
		}

		image {
			border-radius: 15rpx;
			width: 128rpx;
			height: 128rpx;
		}
	}

	.p_btn {
		padding-bottom: 53rpx !important;
	}

	.product_text {
		width: 80%;
		display: inline-flex;
		flex-direction: column;
		flex-wrap: wrap;
		white-space: normal;
		word-break: break-all;

		.product_t {
			width: 100%;
			font-size: 25rpx;
			color: $color7;
			// white-space: normal;
		}

		.param {
			display: inline-flex;
			flex-direction: column;
			flex-wrap: wrap;
			margin-top: 23rpx;
		}

		.product_else {
			font-size: 22rpx;
			color: $color8;
			line-height: 36rpx;

			.label {
				background-color: #eaeaea;
			}
		}
	}

	.bottom_btn {
		position: absolute;
		bottom: 9rpx;
		right: 0rpx;

		.btn {
			color: $color2;
			background-color: #dddddd;
			border-top-left-radius: 28rpx;
			border-bottom-right-radius: 14rpx;
		}

		.text_btn {
			background-color: $color14 !important;
		}

		.pk_active {
			background-color: #f9b042 !important;
		}
	}

	.product_btn {
		position: absolute;
		bottom: 0;
		right: 0;
		// width: 100%;
		maargin-top: 30rpx;
		background-color: $color14;
		border-radius: 28rpx 0 19rpx 0;

		text {
			// width: 50%;
			// width: calc((100% / 2) - 20rpx);
			background-color: $color14;
			color: $color2;
			text-align: center;
			padding: 10rpx;
			font-size: 20rpx;
			// font-weight: bold;
		}

		text:first-child {
			// border-right: 1px solid $color5;
			box-sizing: border-box;
			border-bottom-left-radius: 15rpx;
			border-top-left-radius: 28rpx;
		}

		text:last-child {
			border-bottom-right-radius: 15rpx;
		}

		.line {
			flex-grow: 0;
			width: 5rpx;
		}

		.text_btn {
			background-color: $color14 !important;
			color: $color2;
			flex-grow: 2;
		}

		.pk_active {
			flex-grow: 1;
			color: #999999 !important;
			background-color: #dddddd !important;
		}
	}

	.overlay {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 15rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.top_cont {
		position: absolute;
		top: 50%;
		left: -35rpx;
		z-index: 15;

		.check_box {
			z-index: 15;

			.check {
				transform: scale(0.7);
			}
		}
	}

	.rcont {
		width: 94%;
		margin-left: 50rpx;
	}

	.bot_tag {
		position: absolute;
		right: 0;
		top: 0;
		border-bottom-left-radius: 20rpx;
	}
}

.pk_box {
	position: fixed;
	top: 300rpx;
	right: 0;
	width: 150rpx;
	height: 70rpx;
	z-index: 99;
	border-radius: 70rpx 0 0 70rpx;
	background-color: $color2;
	border: 1px solid #dddddd;
	box-shadow: -3rpx 2rpx 12rpx rgba(0, 0, 0, 0.2);
	transition: width 5s;

	text {
		width: 40rpx;
		height: 40rpx;
		background-color: #1ebda6;
		border-radius: 50%;
		text-align: center;
		font-size: 23rpx;
		line-height: 40rpx;
		color: #ffffff;
	}

	image {
		height: 40rpx;
		width: 57rpx;
	}
}

.pro_img {
	position: relative;
}

::v-deep uni-checkbox .uni-checkbox-input {
	border-radius: 100%;
}

.check {
	position: relative;
	left: 18rpx;
	top: -18rpx;
}
</style>
